<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新增菜品</title>
<!--公共样式开始-->
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/reset.css">
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/common.css">
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Plugins/FontAwesome/css/font-awesome.min.css">
<!--公共样式结束-->
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/module_form.css">
<link rel="stylesheet" type="text/css" href="{$NOW_THEME_URL}/Assets/Css/page_memberAdd.css">
<script src="{$NOW_THEME_URL}/Assets/Js/jquery.min.js"></script>
<script src="{$NOW_THEME_URL}/Assets/Js/jquery.timer.js"></script>
<script src="{$NOW_THEME_URL}/Assets/Js/common.js"></script>
<script src="__PUBLIC__/Plugins/Datepicker/WdatePicker.js"></script>
<style>
.width_70{
	width:50px;
}
</style>
</head>

<body>
	<div class="page_header">
		<div class="tabbar">
			<ul class="tab clearfix" tabname="tab1">
				<li class="tabhover" show="tab1_0">基本信息</li>
				<li show="tab1_1">菜品属性</li>				
				<li show="tab1_2">缩略图</li>
			</ul>
		</div>
	</div>
	<div class="page_wraper">
		<form id="form_ele">
		<input type="hidden" name="solevar" value="{:create_id()}">
		<div id="tab1_0" fortab="tab1" style="padding-left:8px;">
			
				<table cellpadding="0" cellspacing="0" class="module_form interlaceColor">
					<tr>
						<td class="ele_title"><label for="title">所属餐厅：</label></td>
						<td class="ele_content" colspan="3">
							<eq name="detail.title" value="">
								<select name="restid" id="restSele">
									<option value="">请选择餐厅</option>
									<volist name="list" id="vo"> 
										<option value="{$vo.id}">{$vo.title}（{$vo.entitle}）</option>
									</volist>
								</select>
							<else />
								{$detail.title}（{$detail.entitle}）
								<input type="hidden" name="restid" value="{$detail.id}" class="form_ele_text width_200" />
							</eq>
						</td>
					</tr>
					<tr>
						<td class="ele_title"><label for="title">菜品中文名称：<em>*</em></label></td>
						<td class="ele_content">
							<input name="title" type="text" class="form_ele_text width_200" placeholder="请输入中文名称，10个字符以内">
						</td>
						<td class="ele_title"><label for="entitle">菜品英文名称：<em>*</em></label></td>
						<td class="ele_content">
							<input name="entitle" type="text" class="form_ele_text width_200" placeholder="请输入英文名称，4个单词以内">
						</td>
					</tr>
					<tr>
						<td class="ele_title"><label for="sprice">菜品零售价格：</label></td>
						<td class="ele_content">
							<input name="sprice" type="text" class="form_ele_text width_200" placeholder="请输入菜品销售价格">
						</td>
						<td class="ele_title"><label for="enabstract">菜品成本价格：</label></td>
						<td class="ele_content">
							<input name="mprice" type="text" class="form_ele_text width_200" placeholder="请输入菜品成本价格">
						</td>
					</tr>
					<tr>
						<td class="ele_title"><label for="enabstract">菜品编号：</label></td>
						<td class="ele_content">
							<input name="dishes_num" type="text" class="form_ele_text width_200" placeholder="请输入菜品编号">
						</td>
						<td class="ele_title"><label for="enabstract">所需延长时间：</label></td>
						<td class="ele_content">
							<input name="dishes_time" type="text" class="form_ele_text width_200" placeholder="某些菜品需要延长的配送时间">分钟(选填)
						</td>
					</tr>
					<tr>
						<td class="ele_title"><label for="sprice">选择分类：</label></td>
						<td class="ele_content">
							<select name="sortid" id="parents" style="width:220px;">
								<option value="">请选择</option>
							</select> 
						</td>
						<td class="ele_title"><label for="sprice">菜品特价：</label></td>
						<td class="ele_content">
							<input name="tprice" type="text" value="{$detail.tprice}" placeholder="请输入菜品特价，可不填写" class="form_ele_text width_200">
						</td>
					</tr>
					<tr>
						<td class="ele_title"><label for="sprice">是否下架：</label></td>
						<td class="ele_content">
							<input name="is_xiajia" type="radio" value="2" checked />&nbsp;否&nbsp;&nbsp;&nbsp;&nbsp;
							<input name="is_xiajia" type="radio" value="1" />&nbsp;是
						</td>
						<td class="ele_title"><label for="sprice">点餐次数：</label></td>
						<td class="ele_content">
							<input name="ordernum" type="text" value="" placeholder="此数量决定该餐厅排名前十的菜品" class="form_ele_text width_200">
						</td>
					</tr>
					<tr>
						<td class="ele_title"><label for="sprice">菜品库存：</label></td>
						<td class="ele_content" colspan="3">
							<input name="num" type="text" value="" class="form_ele_text width_200" placeholder="请输入菜品库存">
						</td>
					</tr>
					<tr>
						<td class="ele_title"><label for="abstract">菜品中文简介：</label></td>
						<td class="ele_content" colspan="3">
							<textarea name="abstract"></textarea>
						</td>
					</tr>
					<tr>
						<td class="ele_title"><label for="enabstract">菜品英文简介：</label></td>
						<td class="ele_content" colspan="3">
							<textarea name="enabstract"></textarea>
						</td>
					</tr>
					<tr>
						<td class="ele_title"><label for="enabstract">特别说明：</label></td>
						<td class="ele_content" colspan="3">
							<textarea name="information"></textarea>
						</td>
					</tr>
					<tr style="height:40px"><td colspan="4"></td></tr>
				</table>
			
		</div>
		<div id="tab1_1" fortab="tab1" style="padding-left:8px;display:none;" class="clearfix" >
				<table cellpadding="0" cellspacing="0" class="module_form" id="other">
					<tr>
						<td><label for="title" class="form_ele_add" >添加属性</label></td>
					</tr>
					
				</table>
		</div>
		<div id="tab1_2" fortab="tab1" style="padding-left:8px;display:none;" class="clearfix" >
				<table cellpadding="0" cellspacing="0" class="module_form interlaceColor">
					<tr>
						<td class="ele_title"><label for="title">缩略图（4:3）：</label></td>
						<td class="ele_content" colspan="3">
							<div class="thumb">
								<img src="__PUBLIC__/Images/nothumb.jpg"/>
								<input type="hidden" value="" name="thumb_url[]" id="thumb_url">
								<input type="hidden" name="thumb_title[]" value="">
								<input type="hidden" name="thumb_sort[]" value="0">
							</div>
							<iframe id="upload_frame" class="upload_frame" src="rest.php?s=FIL/Index/onefile&filetype=File" frameborder="0"></iframe>
						</td>
					</tr>
				</table>
		</div>
		</form>
	</div>
	<div class="page_footer pdtd10">
		<input type="button" name="submit" value="提交数据"  class="form_ele_submit"/>
		<input type="reset"  name="reset"  value="清空数据"  class="form_ele_reset"/>
	</div>
</body>
<script type="text/javascript">
	//弹出窗口全局变量
	var api = frameElement.api, W = api.opener;
	var i   = 1;
	var k   = 1;

	$(function(){
		
		//滑动门
		$('.tabbar li').click(function(){
			var tabname = $('.tabbar>ul').attr('tabname');
			$('.tabbar li').removeClass('tabhover');
			$(this).addClass('tabhover');
			
			$('div[fortab="'+tabname+'"]').hide();
			
			var showContent = $('#'+$(this).attr('show')); //当前要显示的内容对象
			showContent.show();
		});
		
		//
		$(".form_ele_add").on("click",function(){
			$("#tab1_1").append(addKuai(i));
			i++;
		});
		
		//根据选择的属性类型确定是该属性否必须
		$(".form_ele_addOne").live("click",function(){
			var flag = $(this).parent("td").siblings("td").children(".selprop").val();
			var i    = $(this).attr('i');
			if(flag==1){
				$(this).parents("tbody").append(addOne(i,k));
			}else if(flag==2){
				$(this).parents("tbody").append(addMany(i,k));
			}
			k++;
		});
		
		//清除当前table
		$(".form_ele_clearMany").live("click",function(){
			$(this).parents("table").remove();
		});
		
		//清除当前tr元素
		$(".form_ele_clearOne").live("click",function(){
			var pobj  = $(this).parents("tr");
			var nexts = pobj.next().is(".data");
			var prevs = pobj.prev().is(".bordersh");
			if(!nexts && prevs){
				pobj.prev().children(".types").children(".selprop").attr("disabled",false);
				pobj.prev().children(".choose").children(".ismust").attr("disabled",false);
			}
			pobj.remove();
		});
		//点击添加数据的时候将禁用多选事件
		$(".form_ele_addOne").live("click",function(){
			$(this).parent().siblings(".types").children(".selprop").attr("disabled","disabled");
			$(this).parent().siblings(".choose").children(".ismust").attr("disabled","disabled");
		});
		
		//根据餐厅选择菜品分类
		$("#restSele").on("change",function(){
			var restid = $(this).val();
			$.get("{:U('Product/dishesByOutlet')}",{restid:restid},function(html){
				$("#parents").html(html);
		 	});
		});
		
		//重置
		$('.form_ele_reset').on('click',function(){
			frameApi.close(); //关闭当前窗口
		});
		
		//提交
		$('.form_ele_submit').on('click',function(){
			
			$('.ismust').each(function(){
				$(this).prop('disabled',false);
			});
			$('.selprop').each(function(){
				$(this).prop('disabled',false);
			});
			
			var tipsObj = windowApi.lhgdialog.tips('正在提交数据...',10,etIcon.loading);
			
			//通过Ajax提交表单
			var postData = {};
			$('.selprop').parent('td').next('td').next('td').children('.ismust').attr('disabled',false);
			postData = $("#form_ele").serialize();
			$.post("{:U('Product/add')}", postData , function(data){
				if(data.status==1){
					windowApi.lhgdialog.tips('数据提交成功！');
					var obj = windowApi.lhgdialog.list['Product_index'];
					obj.reload(obj);
					frameApi.close(); //关闭当前窗口
				}else{
					windowApi.lhgdialog.alert(data.info);
				}
			}, "json");
		});
		
		//事件：多选时是否必选应该为“否”，且不可修改
		$('.selprop').live('change',function(){
			//console.log($(this).parent('td').next('td').next('td').children('.ismust'));
			var object = $(this).parent('td').next('td').next('td').children('.ismust');
			if($(this).val()=='2'){
				object.attr('disabled','disabled').val('2');
			}else{
				object.attr('disabled',false).val('1');
			}
		});
		
		//上传缩略图（4:3）
		var UPLOAD_PATH = '{$UPLOAD_PATH}';
		window.dealSelectFile = function(data){
			$('#thumb_url').val(data.filekey);
			$('.thumb>img').attr('src',UPLOAD_PATH+data.filekey);
		}
	});

//拼接属性html
function addKuai(i){
	
	var html = '' ;
		html += '<table cellpadding="0" cellspacing="0" class="module_form border" id="kuai" >';
	    html += '<tr class="bordersh" style="background:#E6E6E6;">';
	    html += '<td class="ele_title" style="width:80px;">中文名称：</td>';
	    html += '<td class="ele_content"><input placeholder="不超过10个字符" name="flag['+i+'][title]"    value=""    type="text" class="form_ele_text width_150"></td>';
	    html += '<td class="ele_title" style="width:80px;">英文名称：</td>';
	    html += '<td class="ele_content"><input placeholder="不超过4个单词" name="flag['+i+'][entitle]"  value="" type="text" class="form_ele_text width_150"></td>';
	    html += '<td class="ele_title" style="width:80px;">类型</td>';
	    html += '<td class="ele_title  types"><select name="flag['+i+'][type]" style="width:102px;" class="selprop">';
	    html += '<option value="1" selected >单选属性</option><option value="2">多选属性</option>';
	    html += '</select></td>';
	    html += '<td class="ele_title" style="width:80px;">是否必须</td>';
	    html += '<td class="ele_title choose"><select  class="ismust" name="flag['+i+'][ismust]" style="width:102px;">';
	    html += '<option value="1" selected >是</option><option value="2">否</option></select></td>';
	    html += '<td colspan="2"><label class="form_ele_addOne" i="'+i+'">添加数据</label></td>';
	    html += '<td><label class="form_ele_clearMany" >删除</label></td>';
	    html += '</tr>';
	    html += '</table>';
	    
	return html ;
}
//拼接单选html
function addOne(i,k){
	
	var html = '' ;
	    html += '<tr class="data">';
	    html += '<td style="width:80px;">中文名称：</td>';
	    html += '<td class="ele_content"><input placeholder="不超过10个字符" name="flag['+i+'][config]['+k+'][title]"   value=""    type="text" class="form_ele_text width_150"></td>';
	    html += '<td style="width:80px;">英文名称：</td>';
	    html += '<td class="ele_content"><input placeholder="不超过4个单词" name="flag['+i+'][config]['+k+'][entitle]" value="" type="text" class="form_ele_text width_150"></td>';
	    html += '<td style="width:80px;">零售价格</td>';
	    html += '<td class="ele_title"><input name="flag['+i+'][config]['+k+'][mprice]"    value=""  type="text" class="form_ele_text width_50"></td>';
	    html += '<td style="width:80px;">成本价格</td>';
	    html += '<td class="ele_title"><input name="flag['+i+'][config]['+k+'][psprice]"    value=""  type="text" class="form_ele_text width_50"></td>';
	    html += '<td></td><td></td>';
	    html += '<td><label class="form_ele_clearOne" >删除</label></td>';
	    html += '</tr>';
	    
	return html ;
}

//拼接多选html
function addMany(i,k){
	var html = '' ;
	
	 html += '<tr>';
	    html += '<td style="width:80px;">中文名称：</td>';
	    html += '<td class="ele_content"><input placeholder="不超过10个字符" name="flag['+i+'][config]['+k+'][title]" type="text" class="form_ele_text width_150"></td>';
	    html += '<td style="width:80px;">英文名称：</td>';
	    html += '<td class="ele_content"><input placeholder="不超过4个单词" name="flag['+i+'][config]['+k+'][entitle]" type="text" class="form_ele_text width_150"></td>';
	    html += '<td colspan="6">零售价格';
	    html += '<input name="flag['+i+'][config]['+k+'][mprice]" type="text" class="form_ele_text width_50">&nbsp;&nbsp;&nbsp;&nbsp;';
	    html += '成本价格';
	    html += '<input name="flag['+i+'][config]['+k+'][psprice]" type="text" class="form_ele_text width_50">&nbsp;&nbsp;&nbsp;&nbsp;';
	    html += '最大数量';	    
	    html += '<input type="text" name="flag['+i+'][config]['+k+'][maxnum]" class="form_ele_text width_50">&nbsp;&nbsp;&nbsp;&nbsp;';
	    html += '<td><label class="form_ele_clearOne" >删除</label></td>';
	    html += '</tr>';
	    
	return html ;
}
</script>
</html>
